<template>
	<view>
		<view class="dev-navbar-box" :style="{'background':`${bgColor}`,'z-index':`${zIndex}`}">
			<view class="dev-status-bar" :style="{'height':`${statusBarHeight}px`}"></view>
			<view :style="{'height':`${navHeight}px`}" class="content-box-nav">
				<slot name="nav">
					<view class="dev-nav-title">
						<!-- 返回箭头 或返回首页-->
						<view>
							<!-- 返回上一页 -->
							<dev-svg-image @tap="clickBack" v-show="isBack && !backHome" svg-name="leftAroow"
								:modify-color="iconColor">
							</dev-svg-image>
							<!-- 返回首页 -->
							<dev-svg-image @tap="clickBackHome" v-show="backHome" width="60" height="60" svg-name="backHome"
								:modify-color="iconColor">
							</dev-svg-image>
						</view>
						<!-- 导航名称 -->
						<view v-show="!backHome" @tap="clickBack" class="title-box"
							:style="{'color':`${color}`,'font-weight':`${weight}`,'font-size':`${size}rpx`,'text-align':mode}">
							{{title}}
						</view>
						<!-- 居中判断 -->
						<view style="width: 40rpx;height: 40rpx;" v-if="isBack"></view>
					</view>
				</slot>
			</view>
		</view>
		<!-- 如有特殊背景需求，可以使用bottom具名插槽进行导航栏底层自定义 -->
		<view>
			<slot name="bottom">
				<view :style="{'height':`${statusBarHeight+navHeight}px`}"></view>
			</slot>
		</view>
	</view>
</template>

<script>
	/******************************************* 娄渊洋
   * 导航栏
   * @property {String} 'mode' 导航栏文字位置
   * @property {String,Number} 'title' 导航名字
   * @property {String} 'color' 导航栏文字颜色
   * @property {String,Number} 'size' 导航栏文字大小
   * @property {Boolean} 'is-back' 是否显示返回箭头
   * @property {String} 'icon-color' 返回箭头颜色
   * @property {String} 'bg-color' 导航栏背景颜色（默认渐变色）可自定义任何颜色
   * @property {String,Number} 'z-index' 导航栏层级

   */
	export default {
		name: "dev-navbar",
		props: {
			//导航栏文字位置
			mode: {
				type: String,
				default: 'left' //right center
			},
			//导航名字
			title: {
				type: [String, Number],
				default: '返回'
			},
			//文字颜色
			color: {
				type: String,
				default: '#fff'
			},
			//标题文字大小
			size: {
				type: [String, Number],
				default: 36
			},
			//标题文字大小
			weight: {
				type: [String, Number],
				default: 400
			},
			//是否显示返回箭头
			isBack: {
				type: Boolean,
				default: true
			},
			//左箭头颜色
			iconColor: {
				type: String,
				default: '#fff'
			},
			//背景颜色
			bgColor: {
				type: String,
				default: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat'
			},
			//导航栏层级
			zIndex: {
				type: [String, Number],
				default: 999
			},
			//日否监听界面栈
			isPageStack: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				statusBarHeight: global.statusBarHeight, //状态栏高度
				navHeight: global.navHeight, //导航栏高度
				navWidth: global.navWidth, //可使用的宽度刨除药丸宽度
				triggered: false, //是否已经触发返回
				backHome: false, //是否返回首页
			};
		},
		created() {
			if (!global.navAllHeight && !global.iphoneBottom && global.iphoneBottom !== 0) {
				console.log('重新获取导航栏了')
				this.getSystemInfo(); //获取手机系统信息
			}
			//如果开启监听界面栈的话
			if (this.isPageStack) {
				this.pageStack(); //获取当前界面栈
			}
		},
		watch: {
			//监听是否打开监听界面栈
			isPageStack(newValue, oldValue) {
				this.pageStack(); //获取当前界面栈
			}
		},
		methods: {
			//获取手机系统信息
			getSystemInfo() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.statusBarHeight = global.statusBarHeight = res.statusBarHeight;
						const menu = uni.getMenuButtonBoundingClientRect();
						// console.log(res.pixelRatio,'设备像素比')
						_this.navWidth = global.navWidth = menu.left;
						// console.log(_this.navWidth ,'_this.navWidth --_this.navWidth ')
						_this.navHeight = global.navHeight = (menu.bottom + menu.top - res.statusBarHeight *
							2);
						global.navAllHeight = menu.bottom + menu.top - res.statusBarHeight;
						if (res.model === 'iPhone X' || 'iPhone XR' || 'iPhone XS Max' ||
							'iPhone 11' || 'iPhone 11 Pro' || 'iPhone 11 mini' ||
							'iPhone 11 Pro Max' || 'iPhone 12' || 'iPhone 12 mini' || 'iPhone 12 Pro' ||
							'iPhone 12 Pro Max' || 'iPhone 13' || 'iPhone 13 mini' || 'iPhone 13 Pro' ||
							'iPhone 13 Pro Max' || 'iPhone 14' || 'iPhone 14 mini' || 'iPhone 14 Pro' ||
							'iPhone 14 Pro Max' || 'iPhone 15' || 'iPhone 15 mini' || 'iPhone 15 Pro' ||
							'iPhone 15 Pro Max') {
							console.log(res.model, '机型')
							console.log(res.screenHeight - res.safeArea.bottom, '黑边高度')
							global.iphoneBottom = res.screenHeight - res.safeArea.bottom;
						} else {
							global.iphoneBottom = 0;
						}
						_this.$emit('information', {
							'navAllHeight': global.navAllHeight,
							'navHeight': _this.navHeight,
							'navWidth': menu.left
						})
						// console.log(res.statusBarHeight, '状态栏高度');
						// console.log(res.navigationBarHeight, '导航栏高度');
						// console.log(res.brand, '设备品牌');
						// console.log(res.model, '设备型号');
						// console.log(res.screenWidth, '屏幕宽度');
						// console.log(res.screenHeight, '屏幕高度');
						// console.log(res.windowWidth, '可使用窗口宽度');
						// console.log(res.windowHeight, '可使用窗口高度');
					}
				});
			},
			//点击返回按钮
			clickBack() {
				if (!this.isBack) return
				if (this.triggered) return;
				this.triggered = true;
				this.$emit('back')
				uni.navigateBack({
					delta: 1
				});
				setTimeout(() => {
					this.triggered = false;
				}, 1000)
			},
			//判断当前界面栈是否只有一个，如果只有一个的话，显示首页按钮
			pageStack() {
				let pages = getCurrentPages(); //当前页面栈
				console.log(pages, '获取当前界面栈')
				if (pages.length<2) {
					this.backHome = true;
				} else {
					this.backHome = false;
				}
			},
			
			//返回首页
			clickBackHome(){
				uni.switchTab({
					url: '/pages/tab/home'
				});
			}



		}
	}
</script>

<style lang="scss" scoped>
	.dev-navbar-box {
		position: fixed;
		width: 750rpx;

		.dev-status-bar {
			width: 100%;
		}

		.dev-nav-title {
			width: 100%;
			display: flex;
			align-items: center;

			.title-box {
				width: 100%;
			}
		}

		.content-box-nav {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
		}
	}
</style>
